<template>
  <div class="page-login loginBackground">
    <div class="login-header">
      <a href="/" class="logo" />
    </div>
    <div class="login-panel loginBackground" :style="loginBackground">
      <div class="banner">
        <!-- <img src="" width="480" height="370" alt="乐鲜网" /> -->
      </div>
      <el-form
        autoComplete="on"
        :model="loginForm"
        :rules="loginRules"
        ref="loginForm"
      >
        <div class="form">
          <h4 v-if="error" class="tips"><i />{{ error }}</h4>
          <p><span>账号登录</span></p>
          <el-input v-model="loginForm.username" prefix-icon="profile" />
          <el-input
            v-model="loginForm.password"
            prefix-icon="password"
            type="password"
          />
          <div class="foot">
            <el-checkbox v-model="checked">7天内自动登录</el-checkbox>
            <b>忘记密码？</b>
          </div>
          <el-button
            class="btn-login"
            type="success"
            size="mini"
            :loading="loading"
            @click="handleLogin('loginForm')"
            >登录</el-button
          >
          <!-- @click="login" -->
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { isvalidUsername } from "@/utils/validate";
import { setSession, getSession } from "@/utils/support";
//import CryptoJS from 'crypto-js'
export default {
  data: () => {
    const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error("请输入正确的用户名"));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value.length < 3) {
        callback(new Error("密码不能小于3位"));
      } else {
        callback();
      }
    };
    return {
      loginBackground: {
        backgroundImage: "url(/img/login-w.png)",
        backgroundRepeat: "no-repeat",
        backgroundSize: "90%",
        backgroundPosition: "center"
      },
      loginForm: {
        username: "",
        password: ""
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", validator: validateUsername }
        ],
        password: [{ required: true, trigger: "blur", validator: validatePass }]
      },
      loading: false,
      checked: "",
      error: ""
    };
  },
  mounted() {
    if (this.$store.state.user.username && this.$store.state.user.token) {
      this.$store.dispatch("FedLogOut").then(() => {
          console.log("退出了");
          //location.reload(); // 为了重新实例化vue-router对象 避免bug
        });
    }
  },
  layout: "blank",
  methods: {
    handleLogin(loginForm) {
      this.$refs[loginForm].validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("Login", this.loginForm)
            .then(() => {
              this.loading = false;
              setSession("username", this.loginForm.username);
              //setSession("password", this.loginForm.password);
              localStorage.setItem("username", this.loginForm.username);
              this.$router.push({ path: "/" });
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("参数验证不合法！");
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/css/login/index.scss";
</style>
